<script setup>
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import { RouterLink, RouterView } from "vue-router";
import breadCrumb from "@/components/breadCrumb/breadCrumb.vue";
import emitter from "@/utils/mitt.js";
import router from "@/router/index.js";

const keyBreadCrumb = ref(new Date().getTime());
const breadCrumbPath = ref(null);

onMounted(() => {
	// console.log('window.location.pathname', window.location.pathname);
	emitter.on("changePath", ({ path, query = null }) => {
		// console.log('path', path);
		// console.log('query', query);
		breadCrumbPath.value = path;
		keyBreadCrumb.value = new Date().getTime();
		router.push({
			path: path,
			query: query,
		});
	});
});

onBeforeUnmount(() => {
	emitter.off("changePath");
});
</script>

<template>
	<div class="sideContent">
		<bread-crumb :key="keyBreadCrumb" :path="breadCrumbPath"></bread-crumb>
		<router-view v-slot="{ Component }">
			<component :is="Component" />
		</router-view>
	</div>
</template>

<style scoped>
.sideContent {
	width: 1280px;
	min-width: calc(1280px);
	max-width: 1920px;
	min-height: 500px !important;
	margin: 0 auto 20px;
}
</style>
